<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { ElMessage, ElDialog, ElSelect, ElOption, ElMessageBox } from 'element-plus'
import {
  GoldMedal,
  UserFilled,
  PhoneFilled,
  LocationFilled,
  Clock,
  Search,
  RobotFilled // 引入正确的机器人图标
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

// 商家数据类型定义
type Shop = {
  restaurantid: number
  addressareaid: string
  restauranttypename: string
  restaurantname: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  introduction: string
  addressdetail: string
  surplus: string
  state: number
  point: string
}

// 初始化数据
const router = useRouter()
const text = ref('')
const shopmenu = ref<Shop[]>([])
const searchKeyword = ref('')
const targetCity = ref('北京市')
const isSelectAddress = ref(false)
const options = [
  { value: '北京市', label: '北京市' },
  { value: '上海市', label: '上海市' },
  { value: '广州市', label: '广州市' },
  { value: '深圳市', label: '深圳市' },
  { value: '杭州市', label: '杭州市' }
]

// 搜索商家
const search = (val: string) => {
  axios({
    method: 'POST',
    params: { restaurantname: val },
    url: '/restaurant/search',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then((res) => {
    shopmenu.value = res.data.data
  })
}

// 加载所有商家
onMounted(() => {
  axios({
    method: 'GET',
    url: '/manage/resgetall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then((res) => {
    shopmenu.value = res.data.data
  })
})

// 跳转商家详情
const nextdetail = (
  id: number,
  area: string,
  phone: string,
  createTime: string,
  updateTime: string,
  image: string,
  name: string,
  state: number,
  address: string
) => {
  if (state === 2) {
    ElMessage.error('商家正在休息中...')
  } else if (state === 0) {
    ElMessage.warning('商家正在整改中...')
  } else {
    router.push({
      path: '/detail',
      query: {
        restaurantid: id,
        addressareaid: area,
        phone,
        createtime: createTime,
        updatetime: updateTime,
        image,
        restaurantname: name,
        addressdetail: address
      }
    })
  }
}

// 分类筛选
const change = () => (searchKeyword.value = '')
const change1 = () => (searchKeyword.value = '咖啡馆')
const change2 = () => (searchKeyword.value = '地方菜系')
const change3 = () => (searchKeyword.value = '小吃快餐')
const change4 = () => (searchKeyword.value = '火锅')
const change5 = () => (searchKeyword.value = '烧烤')
const change6 = () => (searchKeyword.value = '自助餐')
const change7 = () => (searchKeyword.value = '面包甜点')
const change8 = () => (searchKeyword.value = '面馆')

// AI点餐跳转
const goAIOrder = () => {
  router.push('/chat')
}

// 城市选择
const changeCity = () => {
  isSelectAddress.value = true
}

// 导航功能
const goHome = () => router.push('/index')
const goshangjia = () => router.push('/shangjia')
const handleLogout = () => {
  ElMessageBox.confirm('确认要退出?', '退出询问', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage.success('成功退出!')
      localStorage.setItem('Usertoken', '')
      router.push({ name: 'login' })
    })
    .catch(() => {
      ElMessage.info('退出操作已取消')
    })
}
</script>

<template>
  <div class="font-sans bg-gray-50 text-gray-700">
    <!-- 顶部红色导航栏 -->
    <header class="bg-red-600 text-white shadow-md sticky top-0 z-50">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <ElIcon class="text-white">
            <LocationFilled />
          </ElIcon>
          <span class="font-medium">{{ targetCity }}</span>
          <a
            @click="changeCity"
            class="text-white/80 hover:text-white text-sm transition-colors duration-200"
          >
            [更换城市]
          </a>
        </div>
        <div class="flex items-center space-x-6">
          <button
            @click="goAIOrder"
            class="text-white/90 hover:text-white transition-colors duration-200"
          >
            AI点餐
          </button>
          <a
            @click="handleLogout"
            class="text-white/80 hover:text-white transition-colors duration-200"
          >
            退出登录
          </a>
          <router-link
            to="/perCenter"
            class="text-white/80 hover:text-white transition-colors duration-200"
          >
            个人中心
          </router-link>
        </div>
      </div>
    </header>

    <!-- 搜索导航区 -->
    <nav class="bg-white shadow-sm">
      <div
        class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"
      >
        <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
          <div class="text-2xl font-bold text-red-600">
            <span>商家</span><span class="text-gray-600">展示平台</span>
          </div>
          <div class="flex space-x-6">
            <li
              @click="goHome"
              class="text-gray-600 hover:text-red-600 transition-colors duration-200 cursor-pointer"
            >
              首页
            </li>
            <li @click="goshangjia" class="text-red-600 font-medium cursor-pointer">全部商家</li>
          </div>
        </div>

        <div class="w-full md:w-auto">
          <div class="relative">
            <input
              type="text"
              v-model="text"
              placeholder="搜索商家或美食"
              class="w-full md:w-80 pl-4 pr-12 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 transition-all duration-200"
            />
            <button
              @click="search(text)"
              class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-red-600 text-white rounded-full w-9 h-9 flex items-center justify-center hover:bg-red-700 transition-colors duration-200 shadow-md"
            >
              <ElIcon class="text-white">
                <Search />
              </ElIcon>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 面包屑导航 -->
    <div class="container mx-auto px-4 py-3 text-sm text-gray-500">
      <a @click="goHome" class="text-gray-600 hover:text-red-600 transition-colors duration-200"
        >首页</a
      >
      <span class="mx-2 text-gray-300">/</span>
      <a @click="goshangjia" class="text-red-600 font-medium">全部商家</a>
    </div>

    <!-- 分类筛选区 -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6 container mx-auto px-4">
      <div
        class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-8"
      >
        <div class="flex items-center">
          <span class="text-gray-500 mr-3 font-medium">分类:</span>
          <div class="flex flex-wrap gap-2">
            <button
              @click="change"
              class="px-4 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 transition-colors duration-200 shadow-md"
            >
              全部
            </button>
            <button
              @click="change1"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              咖啡馆
            </button>
            <button
              @click="change2"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              地方菜系
            </button>
            <button
              @click="change3"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              小吃快餐
            </button>
            <button
              @click="change4"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              火锅
            </button>
            <button
              @click="change5"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              烧烤
            </button>
            <button
              @click="change6"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              自助餐
            </button>
            <button
              @click="change7"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              面包甜点
            </button>
            <button
              @click="change8"
              class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors duration-200"
            >
              面馆
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 商家列表区 -->
    <div class="container mx-auto px-4 pb-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 商家卡片 - 动态生成 -->
        <div
          v-for="(shop, index) in shopmenu"
          :key="shop.restaurantid"
          v-if="
            !searchKeyword.value ||
            (shop.restauranttypename && shop.restauranttypename === searchKeyword.value)
          "
          class="bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden transform hover:-translate-y-1 cursor-pointer"
          @click="
            nextdetail(
              shop.restaurantid,
              shop.addressareaid,
              shop.phone,
              shop.createtime,
              shop.updatetime,
              shop.image,
              shop.restaurantname,
              shop.state,
              shop.addressdetail
            )
          "
        >
          <!-- 商家图片 -->
          <div class="relative h-48 overflow-hidden">
            <img
              :src="shop.image"
              alt="商家图片"
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            />
            <!-- 状态标签 -->
            <div class="absolute top-3 left-3">
              <span
                v-if="shop.state === 2"
                class="bg-red-500 text-white text-xs px-2 py-1 rounded-full"
                >休息</span
              >
              <span
                v-else-if="shop.state === 1"
                class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"
                >营业</span
              >
              <span v-else class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full"
                >整改</span
              >
            </div>
          </div>

          <!-- 商家信息 -->
          <div class="p-4">
            <h3 class="text-lg font-bold text-gray-800 mb-2">{{ shop.restaurantname }}</h3>
            <div class="flex items-center text-sm mb-3">
              <ElIcon class="text-yellow-500 mr-1">
                <GoldMedal />
              </ElIcon>
              <span class="text-gray-500 mr-1">评分:</span>
              <span class="text-yellow-500 font-medium">{{ shop.point || '暂无评分' }}</span>
              <span class="mx-3 text-gray-300">|</span>
              <ElIcon class="text-gray-400 mr-1">
                <UserFilled />
              </ElIcon>
              <span class="text-gray-500">剩余容量:</span>
              <span class="text-gray-700">{{ shop.surplus || '未知' }}</span>
            </div>

            <div class="space-y-2 text-sm text-gray-600">
              <div class="flex items-center">
                <ElIcon class="text-gray-400 mr-1">
                  <PhoneFilled />
                </ElIcon>
                <span class="text-gray-500 mr-1">电话:</span>
                <span>{{ shop.phone || '未提供' }}</span>
              </div>
              <div class="flex items-center">
                <ElIcon class="text-gray-400 mr-1">
                  <LocationFilled />
                </ElIcon>
                <span class="text-gray-500 mr-1">地址:</span>
                <span class="line-clamp-1">{{ shop.addressdetail || '未提供地址' }}</span>
              </div>
              <div class="flex items-center">
                <ElIcon class="text-gray-400 mr-1">
                  <Clock />
                </ElIcon>
                <span class="text-gray-500 mr-1">营业时间:</span>
                <span>{{ shop.createtime || '未提供' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between">
          <div class="mb-6 md:mb-0">
            <h3 class="text-xl font-bold mb-4 text-red-400">商家展示平台</h3>
            <p class="text-gray-400 max-w-md">为您提供优质的商家信息服务，发现身边的好商家</p>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
              <h4 class="text-lg font-medium mb-3">关于我们</h4>
              <ul class="space-y-2 text-gray-400">
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">公司介绍</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">加入我们</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">联系方式</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">媒体报道</a>
                </li>
              </ul>
            </div>

            <div>
              <h4 class="text-lg font-medium mb-3">商家服务</h4>
              <ul class="space-y-2 text-gray-400">
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">商家入驻</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">商家中心</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">营销活动</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">服务条款</a>
                </li>
              </ul>
            </div>

            <div>
              <h4 class="text-lg font-medium mb-3">客户支持</h4>
              <ul class="space-y-2 text-gray-400">
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">帮助中心</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">常见问题</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">意见反馈</a>
                </li>
                <li>
                  <a href="#" class="hover:text-white transition-colors duration-200">消费者投诉</a>
                </li>
              </ul>
            </div>

            <div>
              <h4 class="text-lg font-medium mb-3">下载应用</h4>
              <div class="bg-white p-2 rounded-lg inline-block">
                <img src="https://picsum.photos/100/100" alt="应用二维码" class="w-24 h-24" />
              </div>
            </div>
          </div>
        </div>

        <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
          ©2023 商家展示平台 - 版权所有
        </div>
      </div>
    </footer>

    <!-- 城市选择对话框 -->
    <el-dialog v-model="isSelectAddress" title="选择城市" width="300px">
      <el-select v-model="targetCity" placeholder="选择城市" size="large" style="width: 100%">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isSelectAddress = false">取消</el-button>
          <el-button type="primary" @click="isSelectAddress = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
